<template>
  <div>
    <px-table v-if="!showEdit" :data="tableData" class="equip-table" height="calc(100vh - 200px)" border>
      <px-table-column type="index" label="序号" min-width="60" align="center" fixed="left" />
      <px-table-column prop="factoryName" label="厂区" show-overflow-tooltip />
      <px-table-column prop="classNameDesc" label="科室" show-overflow-tooltip />
      <px-table-column prop="updateUser" label="更新人" show-overflow-tooltip />
      <px-table-column prop="updateTime" label="更新时间" show-overflow-tooltip />
      <px-table-column fixed="right" label="操作" width="240" align="center">
        <template #default="scope">
          <px-tooltip content="详情" placement="top">
            <px-button link type="primary" icon="Tickets" @click="handleShowDetail(scope.row)" />
          </px-tooltip>
          <px-tooltip content="编辑" placement="top">
            <px-button v-has="'ALL_ALERT_RULES_ALARM_DESCRIPTION_EDIT'" link type="primary" icon="EditPen" @click="handleEdit(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
    <Edit v-else :id="alarmDescriptionId" :class-name="className" @close="closeEditPage" />
    <Detail v-model="dialogVisible" :class-name="className" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

import type { ResponseDataForAlarmDescription, TableItemType } from "@/api/alarm";
import { getAlarmDescriptionList } from "@/api/alarm";

import Detail from "./components/Detail.vue";
import Edit from "./components/Edit.vue";

const className = ref("");
const alarmDescriptionId = ref(-1);
const showEdit = ref(false);
const dialogVisible = ref(false);
const tableData = ref<ResponseDataForAlarmDescription>([]);

const handleShowDetail = (row: TableItemType) => {
  className.value = row.className;
  dialogVisible.value = true;
};
const handleEdit = (row: TableItemType) => {
  className.value = row.className;
  alarmDescriptionId.value = row.id;
  showEdit.value = true;
};
const closeEditPage = () => {
  showEdit.value = false;
  getList();
};

const getList = async () => {
  const res = await getAlarmDescriptionList();
  tableData.value = res;
};

getList();
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");
</style>
